// import { ProFormUploadDragger } from '@ant-design/pro-form';
import React, { useEffect, useState } from "react";
import { Menu, Dropdown, Button, message, Space, Input, Table } from 'antd';
import "./index.css"
import axios from "axios"
import ProTable from "@ant-design/pro-table";
import { TableListItem } from "../page";

// 表格
const rowSelection = {
    onChange: (selectedRowKeys: any, selectedRows: any) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    onSelect: (record: any, selected: any, selectedRows: any) => {
        console.log(record, selected, selectedRows);
    },
    onSelectAll: (selected: any, selectedRows: any, changeRows: any) => {
        console.log(selected, selectedRows, changeRows);
    },
};
const Comment = () => {
    let [data, setData] = useState([[]])
    useEffect(() => {
        axios.get('https://creationapi.shbwyz.com/api/comment?page=1&pageSize=12').then((res) => {
            setData(res.data.data)
            console.log(res.data.data);
        })
    }, [])
    const columns: any = [
        {
            title: '状态',
            width: 100,
            dataIndex: 'name',
            key: 'name',
            fixed: 'left',
        },
        {
            title: '称呼',
            dataIndex: 'name',
            key: '1',
            width: 196,
        },
        {
            title: '父级评论',
            dataIndex: 'memo',
            ellipsis: true,
            copyable: true,
            search: false,
        },
        {
            title: '操作',
            width: 200,
            key: 'option',
            valueType: 'option',
            fixed: 'right',
            render: () => [<a key="link">通过</a>, <a key="link">拒绝</a>, <a key="link">回复</a>, <a key="link">删除</a>,],
        },
    ];

    // for (let i = 0; i < 100; i++) {
    //     data.push({
    //         key: i,
    //         name: `Edrward ${i}`,
    //         address: `London Park no. ${i}`,
    //     });
    // }
    return (
        <div className="box">
            <div className="head">
                <span style={{ color: "#8C8C8C" }}>工作台&emsp;/&emsp;</span>
                海报管理
            </div>
            <div className="leg"><br />
                <div className="legone">
                    &emsp;<span>文件人&nbsp;:</span>&emsp;
                    <Input placeholder="请输入文件人" style={{ width: "222px", height: "32px" }} />
                    &emsp;  &emsp; &emsp;<span>收件人&nbsp;:</span>&emsp;
                    <Input placeholder="请输入收件人" style={{ width: "222px", height: "32px" }} />
                    &emsp;&emsp; &emsp;<span>主题&nbsp;:</span>&emsp;
                    <Input placeholder="请输入主题" style={{ width: "222px", height: "32px" }} />
                </div>
                <div className="legtwo">
                    <div></div>
                    <div><Button type="primary" className="btns">搜 索</Button>
                        <Button className="btnc">重 置</Button></div>

                </div>
            </div><br />
            <div>
            <ProTable<TableListItem >
                columns={columns}

                rowSelection={{
                    // 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
                    // 注释该行则默认不显示下拉选项
                    selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
                    defaultSelectedRowKeys: [1],
                }}
                tableAlertRender={({ selectedRowKeys, selectedRows, onCleanSelected }) => (
                    <Space size={24}>
                    </Space>
                )}
                tableAlertOptionRender={() => {
                    return (
                        <Space size={16}>
                            <button>通过</button>
                            <button>拒绝</button>
                            <button>删除</button>
                        </Space>
                    );
                }}
                // dataSource={tableListDataSource}
                scroll={{ x: 1300 }}
                options={false}
                search={false}
                rowKey="key"
                toolBarRender={() => [<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2719" width="16" height="16"><path d="M960 416V192l-73.056 73.056a447.712 447.712 0 0 0-373.6-201.088C265.92 63.968 65.312 264.544 65.312 512S265.92 960.032 513.344 960.032a448.064 448.064 0 0 0 415.232-279.488 38.368 38.368 0 1 0-71.136-28.896 371.36 371.36 0 0 1-344.096 231.584C308.32 883.232 142.112 717.024 142.112 512S308.32 140.768 513.344 140.768c132.448 0 251.936 70.08 318.016 179.84L736 416h224z" p-id="2720"></path></svg>]}
            />
        </div>
        </div >
    )
}
export default Comment